import React, { Component } from 'react';
import "./App.css"
import axios from "axios"

class App extends Component {
  
  /* 1.constructor */
  constructor(porps){
    super(porps);
    /* 可以做那些事情 */
    /* 1.初始化状态 */
    this.state={
      msg:"🐂",
      data:[],
    }
  
    /* 2.创建ref */
    this.ref = React.createRef()
    /* 3.修改事件 this */
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    console.log("点击")
  }
  /* 2. getDerivedStateFromProps*/
  static getDerivedStateFromProps(props,state){
    return null
  }
 
  render() {
    /* 3.render 返回一段JSX ！！！ 不要在render 函数中执行 this.setState */
    
    return (
      <div>
        <div className="Outerbox" id='outerbox'> 
            <div className="innerbox">

            </div>
        </div>
        <input type="text" ref={this.ref}/>
        <button onClick={this,this.handleClick}>点击</button>
        <div >
         { this.state.data.map(v=>{
           return <img  src={v.loop_img} key={v.w_s_loopimg_id} alt=""/>
         })}
        </div>
      </div>
    );
  }
  /* 4  组件 挂载 DOM上  */
  componentDidMount(){
      //1.请求数据
      axios.post("http://shopapi.hssfxy.com/api/v1/getLoopimg"
      ).then(res=>{
        console.log(res)
        this.setState({
          data:res.data.wdata
        })
      })
    /* 2.订阅 */
    //todo redux  subscribe  订阅数据
    /* 3.注册事件 */
   document.getElementById("outerbox").addEventListener("scroll",function(e){
     console.log("盒子滚动了")
   })
  }
}

export default App;
